﻿<!DOCTYPE HTML>
<html>

<head>
<script type="text/javascript">
window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		title:{
			text: "Temperature Comparison of Two Cities",
		},        		
		exportEnabled: true,
		axisY: {
			includeZero:false,          
			suffix: "°C",
		},     
		axisX: {
			interval:1,
			intervalType: "month",
			valueFormatString: "MMM",
		},
		toolTip: {
			shared: true,		
		},
		data: [
		{
			type: "rangeColumn",			
			name: "City 1",
          	indexLabel: "{y[#index]}",
			indexLabelFontSize: 12,
			yValueFormatString: "#0.## °C",
			showInLegend: true,
			dataPoints: [   
				{x: new Date(2013,00,01), y: [08, 20]},	
				{x: new Date(2013,01,01), y: [10, 24]},	
				{x: new Date(2013,02,01), y: [16, 29]},	
				{x: new Date(2013,03,01), y: [21, 36]},	
				{x: new Date(2013,04,01), y: [26, 39]},	
				{x: new Date(2013,05,01), y: [22, 39]},	
				{x: new Date(2013,06,01), y: [20, 35]},		
				{x: new Date(2013,07,01), y: [20, 34]},		
				{x: new Date(2013,08,01), y: [20, 34]},	
				{x: new Date(2013,09,01), y: [19, 33]},	
				{x: new Date(2013,10,01), y: [13, 28]},	
				{x: new Date(2013,11,01), y: [09, 23]}
			]
		},
		{
			type: "rangeColumn",
			showInLegend: true,
			name: "City 2",
          	indexLabel: "{y[#index]}",
			indexLabelFontSize: 12,
			yValueFormatString: "#0.## °C",			
			dataPoints: [   
				{x: new Date(2013,00,01), y: [16, 28]},	
				{x: new Date(2013,01,01), y: [18, 31]},	
				{x: new Date(2013,02,01), y: [20, 33]},	
				{x: new Date(2013,03,01), y: [22, 34]},	
				{x: new Date(2013,04,01), y: [22, 33]},	
				{x: new Date(2013,05,01), y: [20, 29]},	
				{x: new Date(2013,06,01), y: [20, 28]},	
				{x: new Date(2013,07,01), y: [20, 28]},		
				{x: new Date(2013,08,01), y: [20, 28]},		
				{x: new Date(2013,09,01), y: [20, 28]},		
				{x: new Date(2013,10,01), y: [14, 27]},	
				{x: new Date(2013,11,01), y: [11, 26]}
			]
		}
		]
	});
	chart.render();
}
</script>
	<script src="../../canvasjs.min.js"></script>
	<title>CanvasJS Example</title>
</head>
<body>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>
</body>


</html>
